<template>
  <custom-modal
    v-if="visible"
    :fullscreen="true"
    :width="width"
    :visible="visible"
    :title="$t('auditProcess')"
    :destroyOnClose="true"
    :bodyStyle="{ height: '500px', overflowY: 'auto' }"
    class="showAuditProcessModal"
    modalCls=".showAuditProcessModal"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button
        type="primary"
        @click.stop="
          () => {
            visible = false
          }
        "
      >{{ $t('back') }}
      </a-button>
    </template>
    <a-spin :spinning="loading">
      <!-- 审核节点列表 -->
<!--      TODO 字段适配-->
      <div class="nodeAttrTbBox commonTableSty">
        <a-table
          ref="nodeAttrTable"
          :columns="columns"
          :data-source="auditLists"
          :pagination="false"
          :scroll="{ y: 400, x: 1000 }"
          row-key="id">
        <span slot="processModeDesc">
          {{ $t('auditWay') }}
          <question-mark-tip
            :tip-title="$t('processModeDesc')"
            :popupContainer="$commonFun.getPopupContainer"
          ></question-mark-tip>
        </span>
          <template slot="name" slot-scope="text">
            <table-ellipsis :text="text || '-'"></table-ellipsis>
          </template>
          <template slot="approver" slot-scope="text">
            <table-ellipsis :text="text || '-'"></table-ellipsis>
          </template>
          <template slot="actualAssignee" slot-scope="text">
            <table-ellipsis :text="text || '-'"></table-ellipsis>
          </template>
          <!-- 操作结果 -->
          <template slot="operationResult" slot-scope="text">
            <table-ellipsis :text="$t(text === 1 ? 'opened' : 'closed')"></table-ellipsis>
          </template>
          <!-- 审核时间 -->
          <template slot="verifyTime" slot-scope="text">
            <table-ellipsis :text="$commonFun.getDateTimeStr(text) || '-'"></table-ellipsis>
          </template>
          <!-- 审核意见 -->
          <template slot="reviewComments" slot-scope="text">
            <table-ellipsis :text="text || '-'"></table-ellipsis>
          </template>
        </a-table>
      </div>
    </a-spin>
  </custom-modal>
</template>
<script>
  import CustomModal from '@/components/CustomModal/index.vue'
  import DisplayTbList from '@/views/components/AuditProcess/displayTbList'
  import ProcessViewer from '@/components/ProcessViewer'
  import flowDesignApi from '@/api/modules/flowManage/flowDesign'
  import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
  import i18n from "@/lang";

  const initProcessView = {
    index: '',
    xmlData: ''
  }
  export default {
    components: {
      CustomModal,
      tableEllipsis,
    },
    props: {
      taskId: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '1000px'
      }
    },
    data() {
      var _this = this;
      return {
        visible: false,
        loading: false,
        auditLists: [],
        columns: [
          {
            title: i18n.t('nodeName'),
            dataIndex: 'name',
            key: 'name',
            width: '140px',
            scopedSlots: { customRender: 'flowElementName' }
          },
          {
            title: i18n.t('yqspyh'),
            dataIndex: 'candidateUserNo',
            key: 'approver',
            width: '180px',
            customRender(text, record){
              if (!record.candidateUserEmail) {
                return '-';
              }
              return record.candidateUserEmail + '(' + record.candidateUserNo + ')';
            }
          },
          {
            title: i18n.t('sjspyh'),
            dataIndex: 'actualAssignee',
            key: 'actualAssignee',
            width: '180px',
            customRender(text, record){
              if (!record.userEmail) {
                return '-';
              }
              return (record.userEmail || '') + '(' + record.userNo + ')';
            }
          },
          {
            title: i18n.t('operationResult'),
            dataIndex: 'status',
            key: 'operationResult',
            width: '120px',
            customRender(text, record){
                return _this.$store.getters.getDictCodeObj('taskGcyAuditStatusDictCode')[text] || text;
            }
          },
          {
            title: i18n.t('verifyTime'),
            dataIndex: 'updateTime',
            key: 'verifyTime',
            width: '180px',
            scopedSlots: { customRender: 'verifyTime' }
          },
          {
            title: i18n.t('reviewComments'),
            dataIndex: 'opinion',
            key: 'opinion',
            width: '200px',
            scopedSlots: { customRender: 'reviewComments' }
          }
        ]
      }
    },
    watch: {
      visible: {
        handler(val) {
          if (val) {
            this.getData()
          } else {
            this.resetData()
          }
        },
        immediate: true
      }
    },
    mounted() {
      this.$store.dispatch('getTaskGcyAuditStatusDictCodeData');
    },
    methods: {
      handleCancel() {
        this.visible = false
      },
      toggleVisible(val) {
        this.visible = val
      },
      getData() {
        this.loading = true
        this.$api.getTaskAuditHistory({taskId: this.taskId}).then(res => {
          const {data} = res
          if (!data) {
            return
          }
          this.auditLists = data
        }).finally(() => {
          this.loading = false
        })
      },
      resetData() {
        this.loading = false
        this.processView = {
          ...initProcessView
        }
      }
    }
  }
</script>
<style lang="less">
  .showAuditProcessModal {
    .ant-modal-header {
      border-bottom: none;
      padding: 16px 24px 10px 24px;
    }
  }
</style>
